<template id="main_money">
	<div class="main_money">

		<!--头部-->
		<div class="about_header">

			<div class="about_title">
				<router-link to="/main"><img src="../../assets/images/class/jiantou_03.png" /></router-link>

				<p>我的钱包</p>
				<div class="about_select">
					<div class="about_ing">
					<router-link :to="{path:'/consumer_details',query:{money:money}}">消费明细</router-link>
					</div>
					  

				</div>

			</div>
		</div>
		<!--头部结束-->

		<!--充值金额-->
		<div class="main_money_recharge">

			<img src="../../assets/images/main_money/main_money_03.png" />

			<span>我的余额</span>
			<p>￥{{money}}</p>

			<div class="main_money_service">
				<span>充值问题请及时</span>
				<a href="tel:176 0103 6600" style="font-size: 9px;
    margin-top: 5px;">联系客服</a>
			</div>
		<div style="    position: relative;
    top: 202px;">
				<div class="main_money_pay" style="bottom: 0;" @click="czpay()">充值</div>
			<div class="main_money_pay2" @click="czje()" style="width: 100%;
    height: 55px;
    line-height: 55px;
    color: #fff;
    position: absolute;
    bottom: 0px;
    left: 0;
    background: #2d8f90;
    font-size: 19px;
    font-weight: lighter;
    letter-spacing: 3px;">充值</div>
	<div class="main_money_pay3" style="width: 100%;
    height: 55px;
    line-height: 55px;
    color: #fff;
    position: absolute;
    bottom: 0px;
    left: 0;
    background: #cccc;
    font-size: 19px;
    font-weight: lighter;
    letter-spacing: 3px;">充值</div>
		</div>
		</div>
		<!--充值金额结束-->
		<div style="text-align: center;" v-if="seen">
			<font style="color:#606060;font-size: 10px;">请输入充值金额</font><br>
			<input type="number" @input="jes()" v-model="je" style="    width: 30%;
    height: 30px;">
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				je:'',
				seen:false,
				myMoney: [{
					chang_money: ''
				}],
				sessionid: '',
				coachid: this.$route.query.coachid,
				userid: "",
				code: 1,
				money:''
			}
		},
		created() {
			setTimeout(()=>{
				$('.main_money_pay2').css('display','none')
				$('.main_money_pay3').css('display','none')
			})
		},
		mounted(){
				var SESSION_ID=JSON.parse(window.localStorage.getItem('sessiond'))
				console.log(SESSION_ID.user.phone)
				let _this = this
				let obj = {
						sessionid: SESSION_ID.sessionid,
						userid: SESSION_ID.user.id,
				};
				let qs = require('qs');
				this.$axios.post("/yujia/user/showPersonalCenter", qs.stringify(obj), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}

				}).then(function(response) {
					console.log(response.data.data.userWallet.money)
					_this.money=response.data.data.userWallet.money				
				}).catch(function(error) {
					console.log(error);
				})			
		},
		methods: {
			czje:function(){
					this.$router.push({
						
					path: '/czpay',
					query: {
						'price':this.je
					}
				})
			},
			jes:function(){
				console.log(this.je)
				if(this.je != ''){
					setTimeout(()=>{
						$('.main_money_pay3').css('display','none')
						$('.main_money_pay').css('display','none')
						$('.main_money_pay2').css('display','block')
					})
				}	
			},
			czpay:function(){
				this.seen=true
				if(this.seen == true){
					setTimeout(()=>{
						$('.main_money_pay3').css('display','block')
					})
				}
			}
		}
	}
</script>

<style scoped>
	@import "../../assets/css/main_money.css";	

</style>